<!--
 * @Author: your name
 * @Date: 2020-12-04 18:13:48
 * @LastEditTime: 2020-12-28 18:26:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\installationGuide\installation.vue
-->
<template>
    <div class="installation-index-main-box">
        <BaseHeader returnMain='/installationGuide' :sn='$route.query.sn'></BaseHeader>
        <div class="content-box" v-loading='loading'>
            <div class="select-box">
                <div style="width:50%;">
                    <el-select v-model="type" filterable :placeholder="$t('pleaseSelect')" @change='typeChange' style="width:100%;">
                        <el-option
                            v-for="item in typeList"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div style="width:50%;">
                    <el-select v-if='type=="0"' style="width:100%;" v-model="modal" filterable :placeholder="$t('pleaseSelect')" :disabled="type=='0'?true:false" >
                        <el-option
                            v-for="item in dictionary.WARRANT_INVERTER_TYPES"
                            :key="item.value"
                            :label="item.code"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-if='type=="1"' style="width:100%;" v-model="modal" filterable :placeholder="$t('pleaseSelect')" >
                        <el-option
                            v-for="item in batteryList"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-if='type=="2"' style="width:100%;" v-model="modal" filterable :placeholder="$t('pleaseSelect')" >
                        <el-option
                            v-for="item in commList"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="text-box">
                <p>{{$t('installationGuide.explain')}}:</p>
                <div class="button-box-downlaod" @click='downloadButton'>
                    {{$t('devUpgrade.download')}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BaseHeader from '../../components/baseHeader'
export default {
    components: {
        BaseHeader
    },
    props: {

    },
    data() {
        return {
            type:'0',
            typeList:[{
                id:"0",
                text: this.$t('inverter')
            },{
                id:"1",
                text: this.$t('devicd.display.Battery')
            },{
                id:"2",
                text: this.$t('installationGuide.commSelect')
            }],
            dictionary:{},
            modal:'',
            batteryList:[{
                id:'0',
                text:'T-BAT SYS-HV'
            },{
                id:'1',
                text:'T-BAT H 5.8'
            }],
            commList:[{
                id:'0',
                text:'Pocket WiFi'
            },{
                id:'1',
                text:'Pocket LAN'
            },{
                id:'2',
                text:'Pocket 4G'
            }],
            imgList:[],
            loading:false,
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch()
        this.snGuideGetInverterTypeBySn()
    },
    methods: {
        downloadButton(){
            let src = `/snGuide/DownloadInstructionDocBySn.do?sn=${this.$route.query.sn}&type=${this.type}&inverterType=${this.modal}`
            // let iframe = document.createElement('iframe');
            // iframe.style.display = 'none';
            // iframe.src = "javascript: '<script>location.href=\"" + src + "\"<\/script>'";
            // document.getElementsByTagName('body')[0].appendChild(iframe);
            // window.open(process.env.VUE_APP_BASE_PROXY + process.env.VUE_APP_BASE_API2+ src)
            this.comm.windowOpen('/snGuide/DownloadInstructionDocBySn',{
                sn:this.$route.query.sn,
                type:this.type,
                inverterType:this.modal,
            })
        },
        typeChange(){
            if(this.type == '1' || this.type == '2'){
                this.modal = '0'
            }
            if(this.type == '0'){
                this.snGuideGetInverterTypeBySn()
            }
        },
        async snGuideGetInverterTypeBySn(){
            let res = await this.API.snGuideGetInverterTypeBySn({
                sn:this.$route.query.sn
            })
            this.modal = res.object + ''
        },

        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'WARRANT_INVERTER_TYPES',
                lang:localStorage.getItem('lang')||'zh_CN'
            })
            this.dictionary = res || {}
        },
    },
};
</script>

<style  lang="less" scoped>
.installation-index-main-box{
    height: 100%;
    .content-box{
        // padding:20px;
        position: relative;
        background: url('../../assets/img/warranty_bg.png') no-repeat;
        background-position: 100% 0%;
        // width: 89%;
        height: calc(100% - 110px);
        .select-box{
            display: flex;
            div:nth-child(0){
                flex: 1;
            }
            div:nth-child(1){
                flex: 2;
            }
        }
        .text-box{
            padding: 15px;
            font-size: 13px;
            .button-box-downlaod{
                width: 40%;
                margin: 0 auto;
                text-align: center;
                background-color: orange;
                padding: 15px 0px;
                border-radius: 10px;
                color: #fff;
            }
        }
    }
}
</style>
